<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../plugins/datatables/css/jquery.dataTables.css">
    <link rel="stylesheet" href="../../css/rmp.css" media="all">
</head>
<body>
<div class="layui-fluid">

    <div class="rmp-serverInfo-btn-tools layui-elem-quote layui-quote-nm">
        <div class="layui-btn-group">
            <button class="layui-btn" data-type="">全部</button>
        </div>
        <span class="rmp-serverInfo-btn-tools-right">
            <div class="layui-inline">
                <button class="layui-btn">添加服务器</button>
                <button class="layui-btn ">批量操作</button>
                <button class="layui-btn "><i class="layui-icon">&#x1002;</i></button>
            </div>
        </span>
    </div>

    <div class="rmp-serverInfo-table">
        <hr>
        <table class="layui-table" lay-skin="line row">
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>ID</th>
                <th>HOST</th>
                <th>真实HOST</th>
                <th>用户名</th>
                <th>密码</th>
                <th>类型</th>
                <th>添加时间</th>
                <th>最近使用</th>
                <th>标签</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<script src="../../plugins/jquery.js"></script>
<script src="../../plugins/layui/layui.js"></script>
<script src="../../plugins/datatables/js/jquery.dataTables.js"></script>
<script src="../../js/global.js"></script>
<script>
var globalLoadIndex;
var table;

/**************layui tpl模板*****************/
var serverInfoEditTpl;
var serverInfoParameterEditTpl;
var serverInfoBatchSaveTpl;
/************************************/

layui.use([ 'layer', 'form'], function(){
    var layer = layui.layer,
            form = layui.form;

    $(function(){
        //初始化模板
        serverInfoEditTpl = templates["server-info-edit-tpl"];
        serverInfoParameterEditTpl = templates["server-info-parameters-edit-tpl"];
        serverInfoBatchSaveHtml = templates["server-info-batch-add-tpl"];

        //初始化相关页面
        var $showView = $('.rmp-serverInfo-btn-tools > .layui-btn-group')
        $.each(serverInfos.serverTypes, function(type, name) {
            $showView.append('<button class="layui-btn layui-btn-primary" data-type="' + type + '">' + name + '</button>');
        });
        /********************************初始化表格**************************************************/
        table = $('.layui-table').on('preXhr.dt', function( e, settings, data){
                globalLoadIndex = layer.msg('正在加载数据...', {icon:16, time:99999999, shade:0});
            }).on('init.dt', function(){
                layer.close(globalLoadIndex);
            }).on('draw.dt', function(){
                layer.close(globalLoadIndex);
            }).DataTable($.extend(true, {}, DT_CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
            "columnDefs": [{"orderable":false, "aTargets":[0, 5, 9, 10]}],
            "ajax":SERVER_INFO_LIST_ALL_URL + '?userKey=' + userKey,
            "columns":[
                {
                    "data": null,
                    "render": function(data) {
                        return '<input type="checkbox">';
                    }
                },
                {
                    "data":"id"
                },
                {
                    "data":'host',
                    "render":function( data, type, row, meta) {
                        return data + ":" + row.port;
                    }

                },
                {
                    "data":'realHost',
                    "render":function(data) {
                        return data;
                    }

                },
                {
                    "data":"username"
                },
                {
                    "data":"password",
                    "render":function(data) {
                        return '<a class="layui-btn layui-btn-sm" href="javascript:;" onclick="layer.alert(\'' + data + '\', {title:\'密码查看\', icon:4, shadeClose:true});">查看</a>';
                    }
                },
                {
                    "data":"serverType",
                    "render":function(data) {
                        return '<img src="../../images/' + data + '.png" alt="' + data + '" title="' + data + '" style="height:30px;width:34px;"/>' + data;
                    }
                },
                {
                    "data":"createTime",
                    "render":DT_CONSTANT.DATA_TABLES.COLUMNFUN.ELLIPSIS
                },
                {
                    "data":"lastUseTime",
                    "render":DT_CONSTANT.DATA_TABLES.COLUMNFUN.ELLIPSIS
                },
                {
                    "data":"tags",
                    "render":function(data){
                    	if (data == null) {
                    		return "";
                    	}
                        var arrs = data.split(" ");
                        var html = '';
                        $.each(arrs, function(i, n) {
                        	if (n.length > 0) {
                        		html += '<span class="layui-badge layui-bg-green rmp-server-info-tags-label">' + n + '</span>&nbsp;';
                        	}                           

                        });
                        return html;
                    }
                },
                {
                    "data":null,
                    "render":function(data) {
                        var html = '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm del-server">删除</button>'
                                + '<button type="button" class="layui-btn layui-btn-warm layui-btn-sm update-server">修改</button>'
                                + '<button type="button" class="layui-btn layui-btn-normal layui-btn-sm start-server">监控</button>'
                                + '<button type="button" class="layui-btn layui-btn-sm copy-server">复制</button>';
                        return html;
                    }
                }
            ]
            }));
            /*************************************绑定代理事件监听******************************************************/
            $(document).delegates({
                //删除指定服务器信息
                '.del-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    var that = this;
                    layer.confirm('确认要删除该条数据吗?', {title:"提示"}, function(index){
                        //向服务端发送删除指令
                        $.post(SERVER_INFO_DEL_URL, {id:data.id, userKey:userKey}, function(json){
                            validatReturnJson(json, function(){
                                table.row($(that).parents('tr')).remove().draw();
                                layer.msg('删除成功!', {icon:1, time:1800});
                            });
                        });
                        layer.close(index);
                    });
                },
                //更新指定服务器信息
                '.update-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    data.serverTypes = serverInfos.serverTypes;
                    layer_show('编辑服务器信息', serverInfoEditTpl.render(data), 800, 620, 1, function(layero, index){
                        //表单渲染
                        $('#serverType').val(data.serverType);
                        form.render(null, 'server-info-form');
                    });
                },
                //开启监控
                '.start-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    globalLoadIndex = layer.msg('正在尝试开启监控...', {icon:16, time:99999999, shade:0.4});
                    $.post(SERVER_INFO_MONITORING_URL, {id:data.id, userKey:userKey}, function(json){
                    	layer.close(globalLoadIndex);
                        validatReturnJson(json, function(){
                            layer.msg('启动监控成功!', {icon:1, time:1800});
                        });
                    });
                },
                //复制信息
                '.copy-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    data.serverTypes = serverInfos.serverTypes;
                    layer_show('复制服务器信息', serverInfoEditTpl.render(data), 800, 620, 1, function(layero, index){
                        //删除已存在的id
                        layero.find("#id").val('');
                        //表单渲染
                        $('#serverType').val(data.serverType);
                        form.render(null, 'server-info-form');
                    });
                },
                //根据标签过滤
                '.rmp-server-info-tags-label':function(){
                    var that = this;
                    table.columns(9).search($(that).text()).draw();
                },
                //添加服务器
                '.rmp-serverInfo-btn-tools-right button:eq(0)':function(){
                    layer_show('添加服务器信息', serverInfoEditTpl.render({serverTypes:serverInfos.serverTypes}), 800, 620, 1, function(layero, index){
                        //表单渲染
                        form.render(null, 'server-info-form');
                    });
                },
                //批量操作
                '.rmp-serverInfo-btn-tools-right button:eq(1)':function(){
                    layer.confirm('请点击下方按钮选择操作:', {shadeClose:true, title:'批量操作工具', btn: ['批量监控', '批量添加', '批量删除']
                                ,btn3: function(index, layero) {//批量删除
                                    batchOp(SERVER_INFO_DEL_URL, '删除', table, 'id', 'host', {userKey:userKey});
                                }}
                            , function(index, layero) { //批量启动监控
                                batchOp(SERVER_INFO_MONITORING_URL, '启动监控', table, 'id', 'host', {userKey:userKey});
                                layer.close(index);
                            }
                            , function(index, layero) { //批量添加
                                layer_show('批量添加', serverInfoBatchSaveHtml, 800, 500, 1, function(index, layero){
                                    form.render();
                                })
                                layer.close(index);
                            });
                },
                //刷新按钮
                '.rmp-serverInfo-btn-tools-right button:eq(2)':function(){
                    table.ajax.reload(function(data) {
                        table.columns(9).search('').draw();
                        //layer.close(globalLoadIndex);
                    }, false);
                },
                //根据服务器器类型筛选刷新表格
                '.rmp-serverInfo-btn-tools > .layui-btn-group > button':function(){
                    var that = this;
                    var serverType = $(this).attr('data-type');
                    var reAjaxUrl = SERVER_INFO_LIST_ALL_URL + '?userKey=' + userKey;
                    if (rmputils.stringUtils.isNotEmpty(serverType)) {
                        reAjaxUrl += '&serverType=' + serverType;
                    }
                    table.ajax.url(reAjaxUrl).load(function(data){
                        $(that).removeClass('layui-btn-primary').siblings('button').addClass('layui-btn-primary');
                        //layer.close(globalLoadIndex);
                    }, false);
                },
                //打开编辑页面的服务器附加参数编辑页面
                '#server-info-setting-parameters':function(){
                    var parameters = $(".rmp-serverInfo-edit-form #parameters").val();
                    //要打开的类型
                    var serverType = $(".rmp-serverInfo-edit-form #serverType").children('option:selected').val();
                    var renderData = {
                        parameters:serverInfos[serverType]['additionalParameters'],
                        values:{}
                    };
                    if (rmputils.stringUtils.isNotEmpty(parameters)) {
                        parameters = JSON.parse(parameters);
                        renderData['values'] = parameters;
                    }
                    //关闭时获取参数并转换成json串
                    layer_show('附加参数设置', serverInfoParameterEditTpl.render(renderData), 600, 400, 1, null, function(index, layero){
                        var json = {};
                        layero.find('input').each(function(i, n){
                            json[$(n).attr('id')] = $(n).val();
                        });
                        $(".rmp-serverInfo-edit-form #parameters").val(JSON.stringify(json));
                    }, null, {shadeClose:false});
                }
            });
            /********************************************表单事件监听****************************************************************/
            //监听批量提交事件
            form.on('submit(server-info-batch-save)', function(data){
                data.field.userKey = userKey;
                $.post(SERVER_INFO_BATCH_SAVE_URL, data.field, function(json){
                    validatReturnJson(json, function(){
                        table.ajax.reload(null, false);
                        layer.closeAll('page');
                        layer.alert('共成功添加 ' + json.data.successCount + ' 条,失败 ' + json.data.failCount + ' 条!', {title:'提示'});
                    })
                });
                return false;
            });

            //监听编辑表单提交事件
            form.on('submit(server-info-single-edit)', function(data){
                data.field.userKey = userKey;
                $.post(SERVER_INFO_EDIT_URL, data.field, function(json) {
                    validatReturnJson(json, function(){
                        table.ajax.reload(null, false);
                        layer.closeAll('page');
                        layer.msg('更新/添加成功!', {icon:1, time:1800});
                    })
                });
                return false;
            });


    });

});


</script>
</body>

</html>

